<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Singulart | 艺术品交易中心</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

    <!-- Bootstrap5 图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
            integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/导航样式.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/首页样式.css" type="text/css">
    <style>
        /* popular用于制作我们热爱的艺术家中的人物图片 */

        .popular {
            width: 150px;
            height: 150px;
            border-radius: 150px;
            overflow: hidden;
            border: 4px solid #d5a770;
            display: inline-block;
            vertical-align: top;
            text-align: center;
        }

        /* 背景设置，暂时用不上，先留着，后面再用 */

        .background_chat {
            background-size: 800px 539px;
            background-position: 50%;
            background-repeat: no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            width: 800px;
            height: 539px;
        }

        /* 鼠标经过时改变字体颜色 */

        .text-color:hover {
            color: #d5a770;
        }

        /* header,隐藏头部盒子*/
        .header-box {
            position: relative;
        }

        .header-menu {
            position: relative;

            display: none;
        }

        .header-box:hover .header-menu {
            display: block;

        }
    </style>
</head>
<body class="">
<!-- 头部导航 -->
<jsp:include page="${pageContext.request.contextPath}/pages/index/header.jsp"/>
<!--轮播图 -->
<section>
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../../assets/images/Rotation/home_slider_artists.1ecbc598.jpg" class="d-block w-100" alt="...">
                <div class="slider-ctn">
                    <span class="title">最新上线</span>
                    <span class="subtitle">Singulart 在线发布雕塑艺术品！</span>
                    <div class="button">
                        <a href="#work" data-label="browse_sculpture">点击探索 <i
                                class="icon bi bi-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img src="../../assets/images/Rotation/home_slider3.c8cfb766.jpg" class="d-block w-100" alt="...">
                <div class="slider-ctn">
                    <span class="title">精选作品</span>
                    <span class="subtitle">探索我们艺术家的万千世界</span>
                    <div class="button">
                        <a href="#artist" data-label="usp-top-artists">探索 <i class="icon bi bi-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img src="../../assets/images/Rotation/home_slider4.23b9d37e.jpg" class="d-block w-100" alt="...">
                <div class="slider-ctn">
                    <span class="title">Singulart</span>
                    <span class="subtitle">Singulart为您精选来自世界各地的优秀艺术家</span>
                    <div class="button">
                        <a href="#world" data-label="browse_painting">开始浏览 <i
                                class="icon bi bi-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>
<!-- 您的线上画廊 -->
<section class="home feat-artworks">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>您的线上画廊</h1>
            </div>
        </div>
    </div>
    <div id="yml-container"></div>

</section>

<!-- 身体-最新的艺术集 -->
<section class="series-home-featured container-fluid" style="background-color: #F8F8F8;" id="work">
    <hr class="m-auto" size="40" width="3" style="color:#d5a770" ;>
    <div class="container">
        <!-- 上面设置一个空盒子，用于设置下面两个白盒的居中 -->
        <!-- 背景图片 -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="text-center p-5">最新的收藏集</h2>
                </div>
            </div>
        </div>
        <div class="container row m-0">
            <div class="col h-100 p-5 bg-white border m-1 rounded-3">
                <!-- 上行盒子参考示例中Add borders布局 -->
                <div class="series-list-elt series-list-singulart">
                    <div class="col-lg-4 col-md-4 col-sm-12 float-start">
                        <div class="thumb">
                            <button type="button " class="btn btn-dark rounded-circle"
                                    style="width:110px;height:110px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
                                     class="bi bi-link-45deg" viewBox="0 0 16 16">
                                    <path
                                            d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z">
                                    </path>
                                    <path
                                            d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z">
                                    </path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-12  float-start p-2">
                        <p class="series-serie-date d-block small text-ceneter m-auto" style="color: #d5a770;">
                            <i class="icon icon-ico-clock"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
                                <path
                                        d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
                                <path
                                        d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
                            </svg></i>更新于 12/24/19
                        </p>
                        <h3 class="text-ceneter "><a class="text-decoration-none small text-dark text-ceneter "
                                                     href="/zh/collection/the-holiday-collection-807">The Holiday Collection</a></h3>
                        <p class="desc small text-secondary  d-block text-ceneter">
                            SINGULART的选择
                        </p>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <a href="/zh/collection/the-holiday-collection-807" aria-label="The Holiday Collection">
                            <div class="series-serie-thumbs">
                                <div class="artwork-thumb lzy "
                                     style="background-image: url('../images/982_1b10ef9a048932b712bbe59aff52841a.jpeg');background-size:cover;">
                                    <img class="img-fluid m-1 float-start" width="39%"
                                         src="../images/982_1b10ef9a048932b712bbe59aff52841a.jpeg" alt="">
                                </div>
                                <div class="artwork-thumb lzy"
                                     style="background-image: url('../images/1120_1b39cbc0bfc82961652a2c6392112a9c.jpeg');">
                                    <img class="img-fluid m-1 float-start" width="30%"
                                         src="../images/1120_1b39cbc0bfc82961652a2c6392112a9c.jpeg" alt="">
                                </div>
                                <div class="artwork-thumb-compo">
                                    <div class="artwork-thumb-mini-top lzy"
                                         style="background-image: url('../images/982_973d7e28f16dabd9f0618d9abe00dcd8.jpeg');">
                                        <img class="img-fluid m-1 float-start" width="20%"
                                             src="../images/982_973d7e28f16dabd9f0618d9abe00dcd8.jpeg" alt="">
                                    </div>
                                    <div class="artwork-thumb-mini-bottom lzy"
                                         style="background-image: url('../images/serie_2043_80ebd411045e8e5e9322cc082c553119.jpeg');">
                                        <img class="img-fluid m-1 float-start" width="20%"
                                             src="../images/serie_2043_80ebd411045e8e5e9322cc082c553119.jpeg" alt="">
                                    </div>
                                </div>
                                <div class="artwork-thumb lzy"
                                     style="background-image: url('../images/serie_3538_29d619dfa90d179ec0319d92de9c33f4.jpeg');">
                                    <img class="img-fluid m-1 float-start" width="25%"
                                         src="../images/serie_3538_29d619dfa90d179ec0319d92de9c33f4.jpeg" alt="">
                                </div>
                                <div class="artwork-thumb-compo">
                                    <div class="artwork-thumb-mini-top lzy"
                                         style="background-image: url('../images/serie_3538_a6120d3178008d4f147362bb1d9e4c8a.jpeg');">
                                        <img class="img-fluid m-1 float-start" width="25%"
                                             src="../images/serie_3538_a6120d3178008d4f147362bb1d9e4c8a.jpeg" alt="">
                                    </div>
                                    <div class="artwork-thumb-mini-bottom lzy"
                                         style="background-image: url('../images/serie_4299_d47bbcd782b55ba90cbc1d83819a052c.jpeg');">
                                        <img class="img-fluid m-1 float-start" width="25%"
                                             src="../images/serie_4299_d47bbcd782b55ba90cbc1d83819a052c.jpeg" alt="">
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col h-100 p-5 bg-white border m-1 rounded-3">
                <!-- 同上，参考盒子？ -->
                <div class="series-list-elt series-list-singulart">
                    <div class="col-lg-4 col-md-4 col-sm-12  float-start">
                        <div class="thumb">
                            <button type="button " class="btn btn-dark rounded-circle"
                                    style="width:110px;height:110px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
                                     class="bi bi-link-45deg" viewBox="0 0 16 16">
                                    <path
                                            d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z">
                                    </path>
                                    <path
                                            d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z">
                                    </path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-12 float-start p-2">
                        <p class="series-serie-date d-block small text-ceneter m-auto" style="color: #d5a770;">
                            <i class="icon icon-ico-clock"><svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
                                <path
                                        d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
                                <path
                                        d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
                            </svg></i>更新于 10/28/19
                        </p>
                        <h3><a class="text-decoration-none small text-dark text-ceneter"
                               href="/zh/collection/%E9%9D%9E%E6%B4%B2-%E5%A4%9A%E6%A0%B7%E5%8C%96%E5%A4%A7%E9%99%86-100">非洲：多样化大陆</a>
                        </h3>
                        <p class="desc small text-secondary  d-block text-ceneter">
                            SINGULART的选择
                        </p>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <a href="/zh/collection/%E9%9D%9E%E6%B4%B2-%E5%A4%9A%E6%A0%B7%E5%8C%96%E5%A4%A7%E9%99%86-100"
                           aria-label="非洲：多样化大陆">
                            <div class="series-serie-thumbs">
                                <div class="artwork-thumb lzy"
                                     style="background-image: url('../images/serie_7289_9d363b7b970bb8fdea20eaad8e937c62.jpeg');">
                                    <img class="img-fluid m-1 float-start" width="25%"
                                         src="../images/serie_7289_9d363b7b970bb8fdea20eaad8e937c62.jpeg" alt="">
                                </div>
                                <div class="artwork-thumb lzy"
                                     style="background-image: url('../images/serie_7289_7536c9e45166e9e9f74c2771fae98aeb.jpeg');">
                                    <img class="img-fluid m-1 float-start" width="25%"
                                         src="../images/serie_7289_7536c9e45166e9e9f74c2771fae98aeb.jpeg" alt="">

                                </div>
                                <div class="artwork-thumb-compo">
                                    <div class="artwork-thumb-mini-top lzy"
                                         style="background-image: url('../images/serie_18575_70be31961c3d1f99d6a5d9687b67fde9.jpeg');">
                                        <img class="img-fluid m-1 float-start" width="25%"
                                             src="../images/serie_18575_70be31961c3d1f99d6a5d9687b67fde9.jpeg"
                                             alt="">

                                    </div>
                                    <div class="artwork-thumb-mini-bottom lzy"
                                         style="background-image: url('../images/serie_23253_c4f8c044ac9a693edb2c824699ffe30a.jpeg');">
                                        <img class="img-fluid m-1 float-start" width="25%"
                                             src="../images/serie_23253_c4f8c044ac9a693edb2c824699ffe30a.jpeg"
                                             alt="">

                                    </div>
                                </div>
                                <div class="artwork-thumb lzy"
                                     style="background-image: url('../images/389_1678c05a6c2270640351b7e7756ec2b9.jpeg');">
                                    <img class="img-fluid m-1 float-start" width="25%"
                                         src="../images/389_1678c05a6c2270640351b7e7756ec2b9.jpeg" alt="">

                                </div>
                                <div class="artwork-thumb-compo">
                                    <div class="artwork-thumb-mini-top lzy"
                                         style="background-image: url('../images/352_e5b56d855f2df3110b76aaeb383354d7.jpeg');">
                                        <img class="img-fluid m-1 float-start" width="25%"
                                             src="../images/352_e5b56d855f2df3110b76aaeb383354d7.jpeg" alt="">

                                    </div>
                                    <div class="artwork-thumb-mini-bottom lzy"
                                         style="background-image: url('../images/352_a9fad6083a29ee3c8a84b00d702e1d2b.jpeg');">
                                        <img class="img-fluid m-1 float-start" width="25%"
                                             src="../images/352_a9fad6083a29ee3c8a84b00d702e1d2b.jpeg" alt="">

                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="text-center p-5 mb-5"><button type="button"
                                                              class="btn btn-bd-black btn-dark p-3 m-auto " style="width:154px;height: 59;">
                        参观所有收藏
                    </button></div>
                </div>
            </div>
        </div>
    </div>
    <hr class="m-auto" size="40" width="3" style="color:#d5a770" ;>
</section>

<!-- 身体-让找到心仪之家 -->
<section class="banner banner-chat">
    <div class="container-fluid p-5 "
         style="background-image:url('../../assets/images/images/background_quizz_3.10d15a5d.jpg');background-repeat: no-repeat;background-size:cover;width:100%">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 col-md-5 col-md-offset-1">
                <div class="content m-auto text-center ">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-chat-right-text-fill" style="width:56px;height:64px;color: #d5a770;"
                         viewBox="0 0 16 16">
                        <path
                                d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353V2zM3.5 3h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z" />
                    </svg>
                    <div class="h1 text-center">让Singulart帮您找到心仪之作</div>
                    <div class=" text-ceneter text-secondary m-auto p-2">
                        您是否寻求专业顾问？<br>或是想要定制作品？<br>我们在线的艺术顾能够免费回答您的所有问题！</div>
                    <div class="text-center p-5 pt-0 pt-0"><button type="button"
                                                                   class="btn btn-bd-black btn-dark p-3 m-auto " style="width:154px;height: 59;">
                        直接联系我们
                    </button></div>
                    <div class="contact">或者 <a class="text-black" href="mailto:sales@singulart.com">通过邮件联系我们</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<jsp:include page="${pageContext.request.contextPath}/pages/index/footer.jsp"/>
</body>

</html>